<template>
  <div id="livefordetailsmain" :class="{ box_fixed: isFixed }">
    <template v-if="!isLoading">
      <router-view></router-view>
      <!-- 更新时间 -->
      <div class="refreshBox" v-if="dataInfo.length != 0">
        数据更新时间： {{ timestamp(dataInfo.timeUnix, "Y-M-D h:m:s") }}
        <img
          src="../../../assets/three/refreshIcon.png"
          @click="refresh"
        />
        <!-- 判断是否正在直播icon图 -->
      </div>
      <!-- 直播信息 -->
      <div class="box livenews" :class="{ fixed: isFixed }" ref="headerBox">
        <div class="ln_left">
          <img
            :src="infoList.roomLogo"
            v-if="infoList != null"
            v-errorImg:live
            @click="ImgPreview(infoList.roomLogo)"
          />
          <div class="liveAnimation" v-if="infoList != null && infoList.status == 1">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="ln_right">
          <p v-if="infoList != null">
            <img src="@/assets/two/shop.png" v-if="infoList.isShop == 1" />
            {{
            infoList.roomTitle
            }}
          </p>
          <p v-if="infoList != null">
            直播时长：
            {{ format_time((infoList.endUnix - infoList.startUnix) * 1000) }}
          </p>
          <p v-if="infoList != null">开播时间： {{ timestamp(infoList.startUnix, "Y-M-D h:m:s") }}</p>
          <p
            v-if="infoList != null && infoList.status != 1"
          >结束时间： {{ timestamp(infoList.endUnix, "Y-M-D h:m:s") }}</p>
          <p v-if="infoList != null && infoList.status == 1">结束时间： --</p>
        </div>
      </div>
      <p class="bgline"></p>
      <!-- 达人信息 -->
      <div class="talentnew box" @click="Talent(talentInfo.authorId)">
        <img :src="talentInfo.logo" class="photos" />
        <div>
          <div class="screenName">{{ talentInfo.nickName }}</div>
          <div class="adfsfg">抖音号:{{ talentInfo.uniqueId }}</div>
        </div>
        <img src="../../../assets/four/rightArrow.png" class="right" />
      </div>
      <p class="bgline"></p>
      <!-- tab -->
      <van-tabs
        v-model="activeName"
        title-class="tab-name"
        :sticky="true"
        offset-top="1.9rem"
        scrollspy
        :duration="0.1"
      >
        <van-tab title="直播数据分析" name="a">
          <liveDataAnalysis class="model_interval" :pData="infoList" />
        </van-tab>
        <van-tab title="直播商品分析" name="b">
          <liveGoodsAnalysis class="model_interval" />
        </van-tab>
        <van-tab title="直播观众分析" name="c">
          <liveAudienceAnalysis class="model_interval" />
        </van-tab>
      </van-tabs>
      <goLiveScreenPage :id="$route.query.room_id" v-if="infoList != null && infoList.status == 1" />
    </template>
    <PageLoading v-if="isLoading" />
    <!-- 我是有底线的~ -->
    <FooterText />
  </div>
</template>

<script>
import Vue from 'vue';
import { Search, Button, Tab, Tabs } from 'vant';
import { ImagePreview } from 'vant';
import liveDataAnalysis from './liveDataAnalysis';
import liveGoodsAnalysis from './liveGoodsAnalysis';
import liveAudienceAnalysis from './liveAudienceAnalysis';
import goLiveScreenPage from '@/component/goLiveScreenPage';
import '../../../common/utils';
import PageLoading from '@/component/pageLoading.vue';
Vue.use(Search, Button, Tab, Tabs);
export default {
  props: {},
  data() {
    return {
      dataInfo: '',
      infoList: '', //直播信息
      value: '',
      activeName: 'a',
      talentInfo: '',
      totalFans: '',
      finishLeft: false,
      //   吸顶
      tabIsfixed: false, //  tab是否吸顶
      isFixed: false,
      fixedVal: 0,
      isFristScroll: false, //是否出发过一次吸顶
      isHide: false,
      timer: null,
      isLoading: true
      // isScroll:false,
    };
  },
  components: {
    liveDataAnalysis,
    liveGoodsAnalysis,
    liveAudienceAnalysis,
    goLiveScreenPage,
    PageLoading
  },
  computed: {},
  created() {
    this.getinfo();
    this.getTalentInfo();
    this.getDataInfo();
  },
  mounted() {
    window.onscroll = e => {
      this.setHeaderFixed();

      this.isHide = true;
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        this.isHide = false;
      }, 600);
    };
  },
  watch: {
    beforeDestroy() {
      window.removeEventListener('scroll', this.setHeaderFixed); //释放window的滑动事件
    }
  },
  methods: {
    watchCar() {
      console.log(123);
    },
    tabScrollFn(callbackPms) {
      //获取tab置顶的参数
      this.tabIsfixed = callbackPms.isFixed;
    },
    setHeaderFixed() {
      //设置顶部浮动
      let headerBoxEl = this.$refs.headerBox;
      if (!headerBoxEl) return;
      if (!this.isFristScroll) {
        let elTop = headerBoxEl.offsetTop;
        this.fixedVal = elTop;
        this.isFristScroll = true;
      }
      let elHeight = headerBoxEl.offsetHeight;
      let windowHeight = window.screen.height;
      let documentHeight = document.body.offsetHeight || document.body.clientHeight;
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= this.fixedVal && documentHeight > windowHeight + elHeight) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    // 头部刷新
    refresh() {
      this.getinfo();
      this.getDataInfo();
    },
    // 获取直播间信息
    getinfo() {
      let that = this;
      that.finishLeft = false;
      that.infoList = null;
      that.$axios
        .get('/api/live/info', {
          params: {
            roomId: that.$route.query.room_id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.infoList = res.data.data;
            // this.getTalentInfo();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取达人信息
    getTalentInfo() {
      let that = this;
      that.$axios
        .get('/api/author/GetAuthorDetailInfo', {
          params: {
            // authorId: '96237199469',
            authorId: that.$route.query.author_id,
            'api-version': '2.0'
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.talentInfo = res.data.data;
            if (res.data.data) {
              if (res.data.data.dataOverView) {
                that.totalFans = res.data.data.dataOverView.totalFans;
              }
            }
            that.getDataInfo();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取数据
    getDataInfo() {
      let that = this;
      that.$axios
        .get('/api/live/data', {
          params: {
            roomId: that.$route.query.room_id
          }
        })
        .then(res => {
          this.isLoading = false;
          if (res.data.code == 0) {
            that.dataInfo = res.data.data;
            that.finishLeft = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //实时大屏的跳转
    Talent(id) {
      this.$router.push({
        path: '/talentDetailsMain',
        query: { id: id }
      });
    },
    // 图片预览（放大）
    ImgPreview(imgurl) {
      ImagePreview({
        images: [imgurl],
        closeable: true
      });
    }
  }
};
</script>

<style lang="less" scoped>
.model_interval {
  padding-top: 0.01rem !important;
}
#livefordetailsmain {
  &.box_fixed {
    padding: 2rem 0 0;
  }
  // 版心
  .box {
    width: 9.2rem;
    margin: 0 auto;
  }
  .bgline {
    width: 100%;
    height: 0.2rem;
    background: #f1f1f1;
  }
  //   更新时间
  .refreshBox {
    box-sizing: border-box;
    width: 9.2rem;
    margin: 0 auto;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f5f5f5;
    border-radius: 0.053333rem;
    border: solid 0.013333rem #e5e5e5;
    margin-top: 0.386667rem;
    position: relative;
    font-size: 0.34rem;
    color: #888;
    text-align: center;
    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
      font-size: 0.373333rem;
      position: absolute;
      right: 0.4rem;
      top: 0.24rem;
    }
  }
  //   直播信息
  .livenews {
    position: relative;
    display: flex;
    padding-top: 0.4267rem;
    .ln_left {
      position: relative;
      height: 1.6rem;
      border: 1px solid #e5e5e5;
      border-radius: 0.2rem;
      img {
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 0.2rem;
      }
    }
    .livingBox {
      position: absolute;
      left: 1.2rem;
      bottom: -0.02rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.4267rem;
      height: 0.4267rem;
      background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
        linear-gradient(#ededed, #ededed);
      background-blend-mode: normal, normal;
      border-radius: 0.0667rem;
    }
    // 直播动图
    .livingGif {
      display: inline-block;
      width: 0.24rem;
      line-height: 100%;
      position: relative;
      @keyframes myfirst1 {
        0% {
          height: 3px;
        }

        25% {
          height: 6px;
        }

        50% {
          height: 9px;
        }

        100% {
          height: 12px;
        }
      }

      @keyframes myfirst2 {
        0% {
          height: 2px;
        }

        25% {
          height: 4px;
        }

        50% {
          height: 6px;
        }

        100% {
          height: 8px;
        }
      }

      @keyframes myfirst3 {
        0% {
          height: 12px;
        }

        25% {
          height: 9px;
        }

        50% {
          height: 6px;
        }

        100% {
          height: 3px;
        }
      }

      span {
        background-color: #fff;
        display: inline-block;
        width: 0.04rem;
        height: 0.16rem;
        position: absolute;
        bottom: -0.14rem;
        border-top-left-radius: 0.0267rem;
        border-top-right-radius: 0.0267rem;
      }

      span:nth-of-type(1) {
        left: 0;
        animation: myfirst1 0.6s ease-in-out 0s infinite alternate;
      }

      span:nth-of-type(2) {
        left: 3px;
        animation: myfirst3 0.6s ease-in-out 0s infinite alternate;
      }

      span:nth-of-type(3) {
        left: 6px;
        animation: myfirst1 0.6s ease-in-out 0s infinite alternate;
      }

      span:nth-of-type(4) {
        left: 9px;
        animation: myfirst3 0.6s ease-in-out 0s infinite alternate;
      }
    }
    .ln_right {
      margin-left: 0.24rem;
      transition: all linear 100ms;
      p:nth-of-type(1) {
        width: 4rem;
        font-size: 0.4rem;
        color: #222;
        padding-top: 0.0533rem;
        padding-bottom: 0.1333rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        img {
          display: inline-block;
          width: 0.44rem;
          height: 0.3733rem;
          margin-top: -0.16rem;
          margin-right: 0.2rem;
        }
      }
      p:nth-of-type(n + 2) {
        font-size: 0.3467rem;
        line-height: 0.56rem;
        color: #888888;
      }
      p:last-of-type {
        padding-bottom: 0.2667rem;
      }
    }
    &.fixed {
      position: fixed;
      width: 10rem;
      top: 0;
      z-index: 19;
      padding: 0.4rem;
      background: #fff;
      box-sizing: border-box;
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.186667rem;
        background-color: #f1f1f1;
      }
      .ln_left {
        width: 1.0667rem;
        height: 1.0667rem;
        border-radius: 0.2667rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .ln_right {
        p {
          padding: 0;
        }
        p:nth-of-type(4),
        p:nth-of-type(3) {
          display: none;
        }
        p:last-of-type {
          line-height: 1;
          padding-top: 0.2rem;
        }
      }
      .livingBox {
        left: 0.65rem;
        bottom: 0;
      }
    }
  }

  //达人信息
  .talentnew {
    display: flex;
    padding: 0.4rem 0;
    position: relative;
    .photos {
      width: 1.3333rem;
      height: 1.3333rem;
      border-radius: 50%;
      background-color: #e5e5e5;
      margin-right: 0.2533rem;
    }
    .screenName {
      width: 6rem;
      font-size: 0.4rem;
      letter-spacing: 1px;
      color: #222222;
      padding: 0.2133rem 0 0.12rem 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .adfsfg {
      width: 205px;
      font-size: 0.32rem;
      color: #888888;
    }
    .right {
      position: absolute;
      right: 0.23rem;
      top: 0.9333rem;
      width: 0.1733rem;
      height: 0.3067rem;
    }
  }
}
</style>
